<script lang="jsx">
/**
 *
 *  执行确认操作的按钮，现在只支持popover的形式
 *  用户执行操作后先显示确认框
 *  等待用户确认后，父组件会收到click事件
 *  @Author: guoweijian
 */
export default {
  name: 'ConfirmButton',
  props: {
    // 确认的类型，现在只支持popover一周行事
    confirmType: {
      default: 'popover',
      validator: (value) => ['popover', 'message'].indexOf(value) !== -1
    },
    // 确认的提示文案
    confirmText: {
      // String类型
      type: String,
      // 默认
      default: '确认执行操作？'
    },
    // 按钮的类型，实际上是设置element-ui的button组件的type属性
    type: {
      // String类型
      type: String,
      // 默认
      default: 'default'
    },

    size: {
      type: String,
      default: 'mini'
    }
  },
  data() {
    return {
      popupVisible: false
    };
  },
  render() {
    // 执行渲染操作后，会根据属性渲染相应的提示组件
    // 按钮的文案是父组件插槽内的文案
    return this.renderButton();
  },
  methods: {
    // 渲染buttonItem方法
    renderButtonItem() {
      return (
        <el-button type={this.type} slot="reference" size={this.size}>
          {this.$slots.default}
        </el-button>
      );
    },
    // 渲染PopoverButton的方法
    renderPopoverButton() {
      return (
        <el-popover
          class="confirm-button"
          width="160"
          value={this.popupVisible}
          on-input={(visible) => {
            this.popupVisible = visible;
          }}
        >
          <p>{this.confirmText}</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" on-click={() => this.popupVisible = false}>取消</el-button>
            <el-button
              size="mini"
              type="primary"
              on-click={() => {
                this.popupVisible = false;
                this.$emit('click');
              }}
            >确定
            </el-button>
          </div>
          {this.renderButtonItem()}
        </el-popover>
      );
    },
    // renderMessageButton() {
    //   return (
    //     <el-button>
    //     </el-button>
    //   );
    // },
    renderButton() {
      let buttonItem;
      switch (this.confirmType) {
        // 根据不同的确认类型，执行不同的方法
        case 'popover':
          buttonItem = this.renderPopoverButton();
          break;
        default:
          break;
      }
      return buttonItem;
    }
  }
};
</script>

<style lang="scss">
.confirm-button + .el-button {
  margin-left: 10px;
}

.el-button + .confirm-button {
  margin-left: 10px;
}
</style>
